<template>
  <div class="container">
    <!-- 内容切换 -->
    <div v-show="list.length == 0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </div>
    <div class="card" v-for="item in list">
      <div style="height: 10px"></div>
      <div class="items">
        <div>检测指标：{{ item.detectionIndicator }}</div>
      </div>
      <div style="height: 5px;"></div>
      <div class="items">
        <div>英文</div>
        <div>{{ item.english }}</div>
      </div>
      <div style="height: 5px;"></div>
      <div class="items">
        <div>检测要求</div>
        <div>{{ item.detectionRequirement }}</div>
      </div>
      <div style="height: 5px;"></div>
      <div class="items">
        <div>检测频率备注</div>
      </div>
      <div style="height: 5px;"></div>
      <div class="items">
        <div>{{ item.detectionRemark }}</div>
      </div>
      <div style="height: 10px"></div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 95%;">
        <div class="looked" @click="dels(item)">删除</div>
        <div class="looked" @click="editTitle(item)">编辑</div>
        <div class="looked" @click="lookDetail(item.id)">自动派单</div>
      </div>
      <div style="height: 10px"></div>
    </div>
    <div style="height: 10px"></div>
    <div class="add" @click="addTitle">新增检测指标</div>
    <div style="height: 3vh"></div>
    <!--  -->
  </div>
</template>
<script>
import { processDetailList, processDetailDel } from '../api/api.js'
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    addTitle() {
      uni.navigateTo({
         url: '/pagesExpert/index/contentDetails?flag=1'
      });
    },
    editTitle(i) {
      uni.setStorageSync('dataDetail', i)
      uni.navigateTo({
         url: '/pagesExpert/index/contentDetails?flag=2'
      });
    },
    funList() {
      processDetailList({processId:uni.getStorageSync('processId')}).then(res=>{
      console.log(res,'res');
      this.list = res.data.data;
    })
    },
    dels(i) {
      let t = this;
      uni.showModal({
        title: '提示',
        content: '是否删除当前工艺详情',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            processDetailDel({ ids: [i.id] }).then(res => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000
                });
                t.funList();
              } else {
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000,
                  icon: 'none'
                });
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
  },
  onShow() {
    this.funList();
  },
};
</script>
<style lang="scss">
.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 90vw;
  height: 25vh;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 0;
  overflow-y: scroll;
}

.add {
  width: 95%;
  margin-left: 2.5%;
  background: #43a064;
  color: #fff;
  border-radius: 5px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 100vh;
  width: 100vw;
  background: #e3ede2;
  color: #1a512c;
  overflow-y: scroll;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #f4fbf3;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 16px;
}

.looked {
  padding: 5px;
  background: #43a064;
  color: #fff;
  width: 30%;
  margin-left: 5%;
  height: 40rpx;
  font-size: 13px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>